<template>
  <view v-if="data" class="bg-white radius-8 px-12 py-16" :class="$attrs" @click="toActivity">
    <view class="flex justify-between item-center">
      <view class="flex item-center flex-1 w-0">
        <image class="cu-avatar round size-44 mr-8 flex-shrink" :src="data.logo"></image>
        <view class="flex-1 text-cut mr-8">
          <view class="text-color-regular fs-16 leading-22 text-cut">{{data.businessShortName}}</view>
          <!-- <view class="text-color-hint fs-12 leading-17 mt-2">{{formatBeginTime(data.releaseTime)}}</view> -->
        </view>
      </view>
      <collect-button v-if="showCollectButton" class="flex-shrink" :userId="userStore.userInfo && userStore.userInfo.id" :activeId="data.id" :collectState="2" @onStateChange="refresh" />
    </view>
    <view class="h-1 bg-default my-8"></view>
    <view class="text-color-regular fs-16 font-semibold leading-22 two-lines-ellipsis">
      <!-- <sign-up-tag v-if="isSignUp" class="mr-8" /> -->
      <tag v-if="data.promotionLabel" class="mr-4">{{ data.promotionLabel }}</tag>
      <text class="align-middle">{{data.activeTitle}}</text>
    </view>
    <view class="flex item-center mt-8 mb-12">
      <text class="fs-21 color-primary font-semibold leading-22 mr-11"><text class="fs-14 font-normal">¥</text>{{data.activePrice}}</text>
      <newcomer-coupon-tag v-if="data.activeRedPacket" :price="data.activeRedPacket.firstRedPacketAmt" class="mr-10" />
      <template v-if="data.activeDiscount && data.activeDiscount.length <= 2">
        <full-discount-tag v-for="(item,index) in data.activeDiscount" :key="index" :data="item" class="mr-10" />
      </template>
    </view>
    <view v-if="data.activeDiscount && data.activeDiscount.length===3" class="mb-12">
      <full-discount-tag v-for="(item,index) in data.activeDiscount" :key="index" :data="item" class="mr-10" />
    </view>
    <view v-if="isSignUp && activityInfo.activeStepPrices && activityInfo.activeStepPrices.length" class="mt-7">
      <sign-up-number-tag v-for="(item,index) in activityInfo.activeStepPrices" :key="index" :number="item.enrollNum" :price="numberFormat(activityInfo.activePrice - item.enrollPrice,2)" :type="2" class="mr-8" />
    </view>
    <!--
		<scroll-view v-if="photos.length > 1" scroll-x="true" class="my-12 w-full whitespace-nowrap">
			<block v-for="(item,index) in photos.filter((_,i) => i < 3)" :key="index">
				<video v-if="isVideoFile(item)" class="overflow-hidden radius-8" :class="index===2?'':'mr-6'" style="width:calc((100% - 12px)/3);height:105px;" :src="item"></video>
				<image v-else class="overflow-hidden radius-8" :class="index===2?'':'mr-6'" mode="aspectFill" style="width:calc((100% - 12px)/3);height:105px;" :src="item"></image>
			</block>
		</scroll-view>
		<view v-else-if="photos.length === 1" class="my-12">
			<video v-if="isVideoFile(photos[0])" class="radius-8 w-full overflow-hidden" style="height:150px;" :src="photos[0]"></video>
			<image v-else class="radius-8 w-full overflow-hidden" style="height:150px;" mode="aspectFill" :src="photos[0]"></image>
		</view>
		-->
    <!-- 活动列表默认显示单图（显示活动图片首张图片）-->
    <view v-if="coverPicture" class="my-12">
      <image class="radius-8 w-full overflow-hidden" style="height:150px;" mode="aspectFill" :src="coverPicture"></image>
    </view>
    <view class="flex justify-between">
      <view class="inline-flex item-center px-8 py-4 radius-4 bg-default">
        <template v-if="data.avatars && data.avatars.length">
          <image v-for="(img,i) in data.avatars" :key="i" class="img size-20 radius-20" :style="[1,2].includes(i) ? `z-index:${i+1};margin-left:-8px;` : ''" style="border:0.5px solid #FFF" :src="img"></image>
        </template>
        <template v-if="isSignUp">
          <text class="ml-4 color-primary fs-10 font-normal leading-22">{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}人报名</text>
        </template>
        <template v-if="!isSignUp">
          <text class="ml-4 color-primary fs-10 font-normal leading-22">已售{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}份</text>
        </template>
        <text class="ml-4 color-primary fs-10 font-normal leading-22">｜</text>
        <text class="ml-4 color-primary fs-10 font-normal leading-22">{{data.browseNum + data.virtualSaleNum * data.virtualNum}}人看过</text>
      </view>
      <!-- 活动状态：1-未发布，2-未开始 隐藏分享按钮 -->
      <view v-if="![1,2].includes(data.activeState)" class="inline-flex center h-28 px-8 py-4 border-secondary-info color-secondary-info fs-12 font-normal leading-22" style="box-sizing:border-box;border-radius:100px;" @click.stop="emits('toShare', data)">
        <image v-if="data.haveAgent" class="size-20 mr-2" src="@/static/image/icon-value-share.png"></image>
        <image v-else class="size-20 mr-2" src="@/static/svg/icon-share-blue.svg"></image>
        <text>分享</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { formatBeginTime, isVideoFile, numberFormat } from '@/utils/index.js'
import { useActivity } from '@/hooks/useActivity.js'
import { useUserStore } from '@/stores/modules/user.js'
import FullDiscountTag from '@/components/full-discount-tag/full-discount-tag.vue'
import Tag from '@/components/tag/tag.vue'

const userStore = useUserStore()

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  showCollectButton: {
    type: Boolean
  }
})

const { isSignUp, photos, activityInfo, coverPicture } = useActivity(props.data)

const emits = defineEmits(['toShare', 'toRefresh'])

const toActivity = () => {
  const url = props.data.promotionType === 'GROUP_BUY'
    ? `/pagesB/activity/activity-group-buy`
    : `/pagesB/activity/activity`;
  uni.navigateTo({
    url: `${url}?id=${props.data.id}&_from=fav_activityListItem`
  })
}

const refresh = () => {
  emits('toRefresh')
}
</script>
